<template>
  <div class="home">
    <cube-select
      v-model="changes"
      :options="changeOptions"
      class="inputRow"
      placeholder="收入或支出"
      @change="selectChange">
    </cube-select>
    <cube-select
      v-model="types"
      :options="typeOptions"
      class="inputRow"
      placeholder="请选择类别"
      @change="selectType">
    </cube-select>
    <cube-input
      v-model="money"
      :clearable="clearable"
      class="inputRow"
      placeholder="请填写金额"
    ></cube-input>
    <cube-input
      v-model="remark"
      :clearable="clearable"
      class="inputRow"
      placeholder="请填写备注"
    ></cube-input>
    <cube-button :primary="true" class="inputRow" @click="add()">添加</cube-button>
    <div class="word">
      <div><router-link to="/login">用户登陆</router-link></div>
      <div><router-link to="/reg">新用户注册</router-link></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { postData } from '../js/axios'
import store from '@/store'
export default {
  name: 'home',
  components: {
    // HelloWorld
  },
  data () {
    return {
      userinfo: '',
      changeOptions: [
        { value: 1, text: '收入' },
        { value: 2, text: '支出' }
      ],
      changes: '收入或支出',
      changesValue: '',
      changesIndex: '',
      typeOptions: [],
      typeDate: [],
      types: '请选择类别',
      typesValue: '',
      typeIndex: '',
      indexShow: true,
      myShow: true,
      clearable: {
        visible: true,
        blurHidden: true
      },
      money: '',
      remark: '',
      loginStatus: 0
    }
  },
  created () {
    console.log('user:', this.$store.state.userinfo)
    if (this.$store.state.userinfo) {
      this.userinfo = this.$store.state.userinfo
      this.loginStatus = 1
    } else {
      this.showToast('当前状态未登陆，请登陆后使用', 'warn', 1200)
    }
    let Obj = {}
    postData('http://account-server.localhost/index.php?s=/index/index/getMyTypeList', Obj)
      .then(res => {
        console.log('res:', res)
        if (res.code === 'ok') {
          this.typeDate = res.typeList
        }
      })
  },
  methods: {
    clickHandler: function (e) {
      console.log('click:', e)
    },
    changeHandler: function (e) {
      console.log('change:', e)
    },
    selectType: function (value, index, text) {
      console.log('change', value, index, text, this.changes)
      this.typeIndex = index
      this.typesValue = value
    },
    selectChange: function (value, index, text) {
      this.typeOptions = []
      this.changesValue = value
      console.log('changeType', value, index, text)
      for (let i = 0; i < this.typeDate.length; i++) {
        if (this.typeDate[i].changes === value) {
          this.typeOptions.push(this.typeDate[i])
        }
      }
    },
    add: function () {
      let Obj = {}
      Obj.userid = this.userinfo.id
      Obj.change = this.changesValue
      Obj.type = this.typesValue
      Obj.money = this.money
      Obj.remark = this.remark
      console.log(Obj, this.loginStatus)
      if (this.loginStatus === 0) {
        this.showAlert('请登陆后使用', 'warn', 1500)
        return false
      }
      if (Obj.change === '' || Obj.type === '' || Obj.money === '') {
        console.log('==')
        this.showAlert('收入或支出、类别和金额不能为空', 'warn', 1500)
        return false
      }
      postData('http://account-server.localhost/index.php?s=/index/index/add', Obj)
        .then(res => {
          this.showAlert('添加成功', 'success', 1500)
          this.changesValue = ''
          this.typesValue = ''
          this.money = ''
          this.changes = '收入或支出'
          this.types = '请选择类别'
        })
    },
    showToast (msg, type, time, callback = function () {}) {
      let self = this
      const toast = this.$createToast({
        txt: msg,
        time: time,
        type: type,
        onTimeout: () => {
          callback(self)
        }
      })
      toast.show()
    },
    showAlert (msg, type, time) {
      this.$createDialog({
        type: type,
        title: msg
      }).show()
    }
  }
}
</script>
<style lang="stylus" scoped>
.home
  width 90%;
  margin 0 auto
  .inputRow
    margin-top 15px;
  .word
    width 100%;
    display flex;
    justify-content space-between
    color #777
    font-size 14px
    padding-top 15px
    a:line
      color #777;
</style>
